<script setup lang="ts">
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryDeviceInventoryList } from '@/api/device-management/inventory';
  import { XlsxUtil, getDatetimeFilename } from '@/utils/util';

  const baseNameMap = {
    itemName: { key: 'name', label: '设备名称' },
    itemModelCode: { key: 'modelCode', label: '设备型号' },
    itemDeviceCode: { key: 'deviceCode', label: '设备编码' },
    itemInventoryStatus: { key: 'bindStatus', label: '库存状态' },
    itemInventoryStatusName: { key: 'bindStatusName', label: '库存状态' },
    itemStoreTime: { key: 'createdAt', label: '入库时间' },
    itemStoreTimeRange: { key: 'storeTimeRange', label: '入库时间' },
    //
    itemId: { key: 'id', label: '设备ID' },
  };

  const dataPage = ref({
    total: 0,
    page: 1,
    pageSize: 10,
  });

  const inventoryStatusOptions = [
    { label: '未出库', value: 0 },
    { label: '已出库', value: 1 },
  ];

  // 查询表格列配置
  const tableColumns = [
    {
      title: baseNameMap.itemId.label,
      dataIndex: baseNameMap.itemId.key,
      // width: 180,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemName.label,
      dataIndex: baseNameMap.itemName.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemModelCode.label,
      dataIndex: baseNameMap.itemModelCode.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemDeviceCode.label,
      dataIndex: baseNameMap.itemDeviceCode.key,
      // width: 300,
      ellipsis: true,
      tooltip: true,
    },
    {
      title: baseNameMap.itemInventoryStatusName.label,
      dataIndex: baseNameMap.itemInventoryStatusName.key,
      // width: 200,
    },
    {
      title: baseNameMap.itemStoreTime.label,
      dataIndex: baseNameMap.itemStoreTime.key,
      // width: 200,
      ellipsis: true,
      tooltip: true,
    },
  ];

  const pageTable = usePageTable({
    create: false,
    searchForm: {
      state: {
        [baseNameMap.itemName.key]: '',
        [baseNameMap.itemModelCode.key]: '',
        [baseNameMap.itemDeviceCode.key]: '',
        [baseNameMap.itemInventoryStatus.key]: '',
        [baseNameMap.itemStoreTimeRange.key]: [],
      },
    },
    table: {
      rowKey: baseNameMap.itemId.key,
      fakePage: true,
      apiFun: async (query) => {
        return new Promise((resolve) => {
          const storeTimeRange: string[] = Array.from(
            query[baseNameMap.itemStoreTimeRange.key]
          );
          let storeTimeStart = '';
          let storeTimeEnd = '';
          if (storeTimeRange.length >= 2) {
            [storeTimeStart, storeTimeEnd] = storeTimeRange;
          }
          queryDeviceInventoryList({
            ...dataPage.value,
            deviceName: query[baseNameMap.itemName.key],
            modelCode: query[baseNameMap.itemModelCode.key],
            deviceCode: query[baseNameMap.itemDeviceCode.key],
            bindStatus: query[baseNameMap.itemInventoryStatus.key],
            createTimeStart: storeTimeStart,
            createTimeEnd: storeTimeEnd,
          }).then((res) => {
            dataPage.value.total = res.total;
            const items = res.list;
            items.map((item: any) => {
              const status = item[baseNameMap.itemInventoryStatus.key];
              if (status === 1) {
                item[baseNameMap.itemInventoryStatusName.key] = '已出库';
              } else if (status === 0) {
                item[baseNameMap.itemInventoryStatusName.key] = '未出库';
              } else {
                item[baseNameMap.itemInventoryStatusName.key] = '未知';
              }
              return item;
            });
            resolve(items);
          });
        });
      },
      onSuccess(data) {
        //
      },
      columns: tableColumns,
      rowSelection: {
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      },
    },
  });

  /**
   * 表格数据导出
   * @param dataList
   */
  const handleExport = (dataList: any[]) => {
    const filename = getDatetimeFilename('【导出-设备库存】', '.xlsx');
    if (XlsxUtil.writeDownload(filename, dataList)) {
      Message.success('导出成功');
    } else {
      Message.error('导出失败');
    }
  };
</script>

<template>
  <div class="m-inventory">
    <TableLayout v-bind="pageTable.bindProps" @batch-export="handleExport">
      <template #searchForm="{ state }">
        <!-- 设备名称 -->
        <a-form-item
          :field="baseNameMap.itemName.key"
          :label="baseNameMap.itemName.label"
        >
          <a-input
            v-model="state[baseNameMap.itemName.key]"
            :placeholder="'请输入' + baseNameMap.itemName.label"
            allow-clear
          />
        </a-form-item>
        <!-- 设备型号 -->
        <a-form-item
          :field="baseNameMap.itemModelCode.key"
          :label="baseNameMap.itemModelCode.label"
        >
          <a-input
            v-model="state[baseNameMap.itemModelCode.key]"
            :placeholder="'请输入' + baseNameMap.itemModelCode.label"
            allow-clear
          />
        </a-form-item>
        <!-- 设备编码 -->
        <a-form-item
          :field="baseNameMap.itemDeviceCode.key"
          :label="baseNameMap.itemDeviceCode.label"
        >
          <a-input
            v-model="state[baseNameMap.itemDeviceCode.key]"
            :placeholder="'请输入' + baseNameMap.itemDeviceCode.label"
            allow-clear
          />
        </a-form-item>
        <!-- 库存状态 -->
        <a-form-item
          :field="baseNameMap.itemInventoryStatus.key"
          :label="baseNameMap.itemInventoryStatus.label"
        >
          <a-select
            v-model="state[baseNameMap.itemInventoryStatus.key]"
            :placeholder="'请选择' + baseNameMap.itemInventoryStatus.label"
          >
            <a-option
              v-for="(item, index) of inventoryStatusOptions"
              :key="'is-' + index"
              :value="item.value"
              :label="item.label"
            />
          </a-select>
        </a-form-item>
        <!-- 入库时间 -->
        <a-form-item
          :field="baseNameMap.itemStoreTimeRange.key"
          :label="baseNameMap.itemStoreTimeRange.label"
        >
          <a-range-picker
            v-model="state[baseNameMap.itemStoreTimeRange.key]"
            style="width: 100%"
          />
        </a-form-item>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
